<template>
  <div class="login">
      <div class="logo">
        <img src="static/images/guide-img/12.png" alt=""/>
      </div>
      <div class="inputDiv">
        <div class="login-user">
            <div>
              <img src="static/images/guide-img/person.png" alt=""/>
            </div>
            <input type="text" id="loginNumber" class="myuser" placeholder="PLEASE INPUT YOUR PHONE NUMBER"  @blur="myuser"/>
        </div>
        <div  class="myerrDiv">
            <div class="myerr" id="errMessage" v-show="isshow"></div>
        </div>
        <div class="login-user">
          <div>
            <img src="static/images/guide-img/key.png"  alt=""/>
          </div>
          <input  type="password" id="loginPass"/>
        </div>
      </div>

    <!--pattern="0?(13|14|15|18)[0-9]{9}"required="required"-->

    <div class="clickLogin">
          <div>
            <img src="static/images/guide-img/boast.png" alt=""/>
          </div>
          <div class="loginart">
            <div @click="login">LOGIN</div>
            <div>FORGOT PASSWORD?</div>
          </div>
    </div>
    <div class="myfooter">
        <div>
          By logging in you agree to
        </div>
        <div class="myfooterAd">
            <div>
              privacy policy
            </div>
            <div>&</div>
            <div>
              terms of service
            </div>
          </div>
    </div>
  </div>
</template>
<script>
import register from './register'
import $ from 'jquery'
    export default{
      name:'login',
      data: function(){
        return {
          'isshow': false,
          $:$
        }
      },
      methods:{
        myuser: function(e){
            var my= e.target.value;
            var mystandard=/^0?(13|14|15|18)[0-9]{9}?$/;
            let isStandard=mystandard.test(my);
          let oErrMessage=document.getElementById("errMessage");
          oErrMessage.innerHTML="Please input right phone number!";
          if(isStandard){
                this.isshow= false
          }else{
            this.isshow=true
          }
        },
        login:function(){
          this.isshow=false;
          let username=document.getElementById("loginNumber").value;
          let password=document.getElementById("loginPass").value;
          let oErrMessage=document.getElementById("errMessage");
          if(username=="15520850270"&&password=="123"){
            this.isshow=false;
            this.$router.push({path:'/common?&isLogin=1&username=15520850270'});

          }else{
            oErrMessage.innerHTML="Please enter the correct password";
            this.isshow=true
          }
        }

      }
    }
</script>
<style scoped>
  .login{
    margin-top: -40px;
    margin-bottom: 0;
    background-image: url("../../static/images/guide-img/15.png");
    background-size: cover;
    background-position: 0 -70px ;
    padding-top: 80px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .login .inputDiv{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 60px 0 40px;
  }
  .login img{
    width: 150px;
    height: 150px;
  }
  .login-user{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*border: 1px solid black;*/
  }
  .login-user>div{
    margin: 10px 0;
  }
  .login-user img{
    width: 20px;
    height: 20px;
  }
  .login-user input{
    width: 80%;
    height: 20px;
    line-height: 12px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #B4B4B5;
    margin-left: 5px;
    font-size: 16px;
    color: #767677;
    letter-spacing: 0;
    outline: none;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 12px;
  }
  .clickLogin img{
      width: 20px;
      height: 20px;
      margin-right: 20px;
  }
  .clickLogin{
      width: 45%;
      display: flex;
      flex-direction: row;
  }
  .loginart{
    display: flex;
    flex-direction: column;
    align-items:  flex-start;
  }
  .loginart>div:nth-child(1){
    font-size: 14px;
    color: #F0907F;
  }
  .loginart>div:nth-child(2){
      color: #F0907F;
      font-size: 12px;
      margin-top: 20px;
  }
  .myfooter{
    margin-top: 100px;
     color: white;
    font-size: 12px;
  }
  .myfooterAd{
      display: flex;
      flex-direction: row;
  }
  .myfooterAd>div:nth-child(1){
    border-bottom: 1px solid white;
    margin-right: 10px;
    padding-bottom: 5px;
  }
  .myfooterAd>div:nth-child(3){
    border-bottom: 1px solid white;
    margin-left: 10px;
    padding-bottom: 5px;
  }
  .myerr{
    font-size:14px;
    color: red;
    /*padding-top: 10px;*/
  }
  .myerrDiv{
    height: 14px;
  }
</style>
